<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Rain Animation</title>
</head>
<body>
<div class="container">
    <div class="cloud"></div>
</div>
</body>
</html>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Poppins', sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #181c1f;
    }

    .container {
        position: relative;
        width: 100%;
        height: 400px;
        display: flex;
        justify-content: center;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        -webkit-box-reflect: below 1px linear-gradient(transparent,transparent ,transparent ,transparent, #0005);
    }

    .cloud {
        position: relative;
        top: 50px;
        width: 320px;
        height: 100px;
        background-color: #fff;
        border-radius: 100px;
        z-index: 100;
        filter: drop-shadow(0 0 35px #fff);
    }

    .cloud::before {
        content: '';
        position: absolute;
        top: -50px;
        left: 40px;
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 90px 0 0 30px #fff;
    }

    .text {
        position: absolute;
        top: 40px;
        height: 20px;
        line-height: 20px;
        text-transform: uppercase;
        color: #fff;
        text-shadow: 0 0 5px #fff,
        0 0 15px #fff,
        0 0 30px #fff;
        transform-origin: bottom;
        animation:  animate 2s linear forwards;
    }

    @keyframes animate {
        0% {
            transform: translateY(0) scale(0.5);
        }
        70% {
            transform: translateY(290px) scale(1);
        }
        100% {
            transform: translateY(290px) scale(1);
        }
    }
</style>
<script>
    function randomText() {
        const text = ('止于你爱')

        const letter = text[Math.floor(Math.random() * text.length)]
        return letter
    }

    function rain () {
        const cloud = document.querySelector('.cloud')
        const e = document.createElement('div')
        const left = Math.floor(Math.random() * 310)
        const size = Math.random() * 1.5
        const duration = Math.random() * 1
        e.classList.add('text')
        cloud.appendChild(e)
        e.innerText = randomText()
        e.style.left = left + 'px'
        e.style.fontSize = 0.5 + size + 'em'
        e.style.animationDuration = 1 + duration + 's'
        setTimeout(() => {
            cloud.removeChild(e)
        },2000)
    }

    setInterval(function() {
        rain()
    }, 20)
</script>